<!-- 新闻详情页 -->
<template>
  <div class="xwDetails-container">
    <!-- 标题 -->
    <div class="article-title">{{ newsDetail.title || '标题' }}</div>

    <!-- 元数据 -->
    <div class="article-meta">
      <div class="read-count">
        <img class="eye-icon" src="/static/MyImage/history.png" />
        <span class="read-text">阅读 {{ newsDetail.hot || 0 }}</span>
      </div>
      <div class="publish-time">
        发布时间: {{ dayjs(newsDetail.create_time).format('YYYY-MM-DD HH:mm') || '时间' }}
      </div>
    </div>

    <!-- 图片占位符 -->
    <div class="image-placeholder">
      <div class="placeholder-icon">
        <div class="rect-icon">
          <image :src="newsDetail.cover" mode="widthFix" v-if="newsDetail.cover" />
        </div>
      </div>
    </div>

    <!-- 文章内容 -->
    <div class="article-content">
      <div class="content-text">{{ newsDetail.content || '内容' }}</div>
    </div>

    <!-- 底部提示 -->
    <div class="bottom-tip">到底了</div>
  </div>
</template>

<script setup lang="ts">
// 页面逻辑可在此添加
import { getNewsDetailData } from '@/https/HomeHTTP'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import dayjs from 'dayjs'
const params = defineProps<{
  uid: string
}>()

const newsDetail = ref<any>({})
const getNewsDetails = async () => {
  const res = await getNewsDetailData(params.uid)
  newsDetail.value = res.data
}
onLoad(async () => {
  console.log(params.uid)
  await Promise.all([getNewsDetails()])
})
</script>

<style lang="scss" scoped>
.xwDetails-container {
  background: #fff;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  padding: 20px 16px 40px 16px;
}

.article-title {
  font-size: 24px;
  font-weight: bold;
  color: #222;
  margin-bottom: 16px;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
}

.read-count {
  display: flex;
  align-items: center;
  color: #3ec99e;
}

.eye-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.read-text {
  font-weight: 500;
}

.publish-time {
  color: #222;
  font-weight: 500;
}

.image-placeholder {
  width: 100%;
  height: 200px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.placeholder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rect-icon {
  width: 40px;
  height: 40px;
  background: #e0e0e0;
  border-radius: 4px;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: #f0f0f0;
    border-radius: 2px;
  }
}

.article-content {
  margin-bottom: 40px;
}

.content-text {
  font-size: 16px;
  color: #222;
  line-height: 1.6;
  font-weight: 500;
}

.bottom-tip {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin-top: 40px;
}
</style>
